<template>
  <el-row>
    <el-col :span="24">
      <el-input placeholder="请输入视频介质名称" v-model.trim="queryList.keyword" clearable class="input-w mr10" size="mini" />
      <el-select placeholder="请选择视频介质类型"
                 clearable
                 class="input-w mr10"
                 v-model="queryList.videotype"
                 size="mini"
                 @change="handleFilter"
                 v-if="videotype == undefined"
      >
        <el-option
                v-for="type in videoTypeList"
                :key="type.typeid"
                :label="type.typename"
                :value="type.typeid"
        />
      </el-select>
      <el-select placeholder="请选择部门"
                 clearable
                 class="input-w mr10"
                 v-model="queryList.groupid"
                 size="mini"
                 @change="handleFilter"
      >
        <el-option
                v-for="group in groupList"
                :value="group.groupid"
                :key="group.groupid"
                :label="group.name"
        />
      </el-select>
      <el-button type="primary" size="mini" @click="handleFilter">
        <el-icon>
          <search />
        </el-icon>
        搜索
      </el-button>
    </el-col>
    <el-col :span="24" class="mt10">
      <el-table
              ref="videoMediumTableRef"
              :data="tableData.listData"
              v-loading="isloading"
              border
              max-height="350px"
              @row-click="handleClickRow"
              @select="handleSelect"
              @select-all="handleSelectAll"
      >
        <el-table-column
                type="selection"
                width="50"
                align="center"
                :selectable="handleSelectAble"
                v-if="selectType == 'checkbox'"
        />
        <el-table-column width="50" align="center" v-else>
          <template #default="{row}">
            <span @click.stop>
              <el-radio
                      :label="row.videoid"
                      v-model="selectedRadioIndex"
                      @change="handleChangeRadio(row)"
                      :disabled="row.playtype != filetype"
              ><span></span></el-radio>
            </span>
          </template>
        </el-table-column>
        <el-table-column label="名称" :show-overflow-tooltip="true">
          <template #default="{row}">
            <a v-if="row.playtype === 'video'" href="javascript:;" @click.stop="handleVideoPlay(row)" class="flex align-items">
              <el-icon>
                <video-play />
              </el-icon>
              <span class="txttdellipsis">{{row.name}}</span>
            </a>
            <audio-table-column
              v-else
              :ref="el => { if (el) audioTableColumn[row.videoid] = el }"
              :row="row"
              sourcefrom="local"
              @handleAudioPlay="handleAudioPlay"
            />
          </template>
        </el-table-column>
        <el-table-column label="介质来源">
          <template #default="{row}">
            {{sourceFromList[row.sourcefrom]}}
          </template>
        </el-table-column>
        <el-table-column label="视频大小">
          <template #default="{row}">
            <span v-if="row.extends && row.extends.size">{{formatSize(row.extends.size)}}</span>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column label="分辨率">
          <template #default="{row}">
            <span v-if="row.extends && row.extends.width && row.extends.height">{{row.extends.width + ' * ' + row.extends.height}}</span>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column label="视频类型">
          <template #default="{row}">
            {{getVideoTypeName(row.videotype)}}
          </template>
        </el-table-column>
        <el-table-column label="画幅类型">
          <template #default="{row}">
            {{getLayoutName(row.layout)}}
          </template>
        </el-table-column>
        <el-table-column label="所属部门">
          <template #default="{row}">
            {{groupsOptions[row.groupid]}}
          </template>
        </el-table-column>
      </el-table>
    </el-col>
    <el-col :span="24" class="mt10">
      <table-pagination
              :queryList="queryList"
              :total = "tableData.total"
              @pagination="getDataList"
      />
    </el-col>
  </el-row>
</template>

<script>
  import {ref, reactive, toRef, nextTick} from 'vue'
  import {getSubRefGroup} from "@/api/group";
  import {getVideos} from "@/api/media/video";
  import {videoTypeList, sourceFromList, formatSize, getVideoTypeName, getLayoutName} from "@/utils/usage-config";
  import TablePagination from "@/views/public/TablePagination";
  import {getMediaReledVideoids, getSeriesReledVideoids} from "@/api/media/media";
  import {getPackageReledVideoids} from "@/api/package/material";
  import AudioTableColumn from "@/components/Common/AudioTableColumn";

  export default {
    name: "VideoMedium",
    components: { TablePagination, AudioTableColumn},
    props: {
      formData: {
        type: Object
      },
      mediaType: {
        type: String,
        default: 'media'
      },
      selectType: {
        type: String,
        default: 'checkbox'
      },
      relAction: {
        type: String,
        default: 'relmedium'
      },
      videotype: {
        type: String,
        default: undefined
      },
      filetype: {
        type: String,
        default: 'video'
      }
    },
    emits: ['handleVideoPlay'],
    setup(props, context) {
      const videoFormData = toRef(props, 'formData')
      const groupList = ref([])
      const groupsOptions = reactive({})
      const queryList = reactive({
        page: 1,
        pagesize: 25,
        keyword: undefined,
        videotype: undefined,
        groupid: undefined
      })
      const tableData = reactive({
        total: 0,
        listData: []
      })
      const isloading = ref(false)
      const selectedVideoIds = ref([])
      const videoMediumTableRef = ref(null)
      const selectedRadioIndex = ref(undefined)
      const audioTableColumn = ref([])
      /** 获取视频介质列表 **/
      const getDataList = () => {
        selectedRadioIndex.value = undefined
        isloading.value = true
        getVideos(queryList).then(response => {
          isloading.value = false
          const {total, list} = response.data
          tableData.total = total
          tableData.listData = list
          nextTick(() => {
            tableData.listData.forEach(row => {
              if (selectedVideoIds.value.includes(row.videoid)) {
                videoMediumTableRef.value.toggleRowSelection(row, true)
              }
            })
          })
        })
      }
      /** 获取部门列表 **/
      const getGroupDataList = () => {
        getSubRefGroup().then(response => {
          groupList.value = response.data
          response.data.forEach(item => {
            groupsOptions[item.groupid] = item.name
          })
        })
      }
      /** 过滤数据 **/
      const handleFilter = () => {
        queryList.page = 1
        getDataList()
      }
      /** 视频播放 **/
      const handleVideoPlay = (row) => {
        context.emit('handleVideoPlay', row)
      }

      /** 点击行选择 **/
      const handleClickRow = (row) => {
        if (row.playtype == props.filetype) {
          if (!selectedVideoIds.value.includes(row.videoid)) {
            getSelectVideoIds(row)
          }
        }
      }
      /** 单选 **/
      const handleSelect = (selection, row) => {
        getSelectVideoIds(row)
      }
      /** 全选 **/
      const handleSelectAll = (selection) => {
        if (selection.length > 0) {
          selection.forEach(row => {
            if (!videoFormData.value.datas.includes(row.videoid)) {
              videoFormData.value.datas.push(row.videoid)
            }
          })
        } else {
          videoFormData.value.datas = []
        }
      }
      /** 获取选择的视频ID **/
      const getSelectVideoIds = (row) => {
        if (videoFormData.value.datas.includes(row.videoid)) {
          const index = videoFormData.value.datas.findIndex(d => d == row.videoid)
          videoFormData.value.datas.splice(index, 1)
          videoMediumTableRef.value.toggleRowSelection(row, false)
        } else {
          videoFormData.value.datas.push(row.videoid)
          videoMediumTableRef.value.toggleRowSelection(row, true)
        }
      }

      /** 获取已关联的视频ID **/
      const getRelEdVideoIds = () => {
        if (props.mediaType == 'media') {
          getMediaReledVideoids({mediaid: videoFormData.value.mediaid}).then(response => {
            selectedVideoIds.value = response.data
          })
        } else if (props.mediaType == 'series') {
          getSeriesReledVideoids({seriesid: videoFormData.value.seriesid}).then(response => {
            selectedVideoIds.value = response.data
          })
        } else if (props.mediaType == 'package') {
          getPackageReledVideoids({packageid: videoFormData.value.packageid}).then(response => {
            selectedVideoIds.value = response.data
          })
        }
      }
      /** 判断视频介质是否可选 **/
      const handleSelectAble = (row) => {
        return row.playtype == props.filetype && !selectedVideoIds.value.includes(row.videoid)
        // return !selectedVideoIds.value.includes(row.videoid)
      }
      const handleChangeRadio = (row) => {
        selectedRadioIndex.value = row.videoid
        videoFormData.value.datas = [row.videoid]
      }

      const init = () => {
        if (props.relAction == 'relmedium') {
          getRelEdVideoIds()
        }
        if (props.videotype) {
          queryList.videotype = props.videotype
        }
        getGroupDataList()
        getDataList()
      }

      const handleAudioPlay = (refKey) => {
        Object.keys(audioTableColumn.value).forEach(videoid => {
          if (refKey != parseInt(videoid)) {
            audioTableColumn.value[videoid].audioPause()
          }
        })
      }

      return {
        groupList,
        groupsOptions,
        isloading,
        queryList,
        tableData,
        videoTypeList,
        handleFilter,
        handleVideoPlay,
        sourceFromList,
        formatSize,
        getLayoutName,
        getVideoTypeName,
        getDataList,
        handleClickRow,
        handleSelect,
        handleSelectAll,
        handleSelectAble,
        videoMediumTableRef,
        selectedRadioIndex,
        handleChangeRadio,
        init,
        audioTableColumn,
        handleAudioPlay
      }
    }
  }
</script>

<style scoped>

</style>
